<template>
  <!-- 页面顶部 -->
  <div>
    <el-header>
      <!-- logo -->
      <a href="#/">
        <img class="logo" src="@/assets/img/logo.png" width="25px" />
        <span class="company">依谷后台管理系统</span>
      </a>

      <!-- 个人中心 -->
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          {{name}} 欢迎你！ 个人中心
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-edit" command="a">修改密码</el-dropdown-item>
          <el-dropdown-item icon="el-icon-switch-button" command="b">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

    <!-- 修改密码的对话框 -->
    <el-dialog
      class="el-dialog-aa"
      title="修改密码"
      :visible.sync="dialogFormVisible"
      width="500px"
      style="padding: 0 50px;"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="padding: 30px 60px 0px 20px;"
      >
        <el-form-item label="原密码" prop="usedPass">
          <el-input type="password" v-model="ruleForm.usedPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改密码的对话框 end-->
  </div>
</template>

<script>
import inOut from "@/api/inOut"; //退出接口
import passwordApi from "@/api/password"; //修改密码接口
export default {
  data() {
    //新密码输入正则验证
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    //确认密码输入正则验证
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      name: localStorage.getItem("jinfeng-mms-username"), //用户名字
      token: localStorage.getItem("jinfeng-mms-token"), //令牌
      dialogFormVisible: false, //修改密码对话框开关
      //对话框的表单内容
      ruleForm: {
        usedPass: "", //原密码
        pass: "", //新密码
        checkPass: "" //确认密码
      },
      rules: {
        //原密码输入验证
        usedPass: [
          { required: true, message: "请输入原密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 8 到 16 个字符",
            trigger: ["blur", "change"]
          }
        ],
        //新密码输入验证
        pass: [
          { required: true, validator: validatePass, trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 8 到 16 个字符",
            trigger: ["blur", "change"]
          }
        ],
        //确定密码输入验证
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" }
        ]
      }
    };
  },
  created() {},
  watch: {
    //监听对话框，取消再次打开保留的校验结果
    dialogFormVisible: function(val, oldVla) {
      if (!val) {
        //关闭对话框时
        this.$refs.ruleForm.clearValidate();
      }
    }
  },
  methods: {
    //点击修改密码、退出触发事件
    handleCommand(command) {
      if (command == "a") {
        this.dialogFormVisible = true; //点击修改密码弹出对话框
        //对话框弹出时清空表单内容
        this.ruleForm = {
          usedPass: "", //原密码
          pass: "", //新密码
          checkPass: "" //确认密码
        };
      } else {
        this.signOut(); //退出事件
      }
    },
    //退出功能
    async signOut() {
      try {
        let token = localStorage.getItem("jinfeng-mms-toke"); //本地localStorage存的toke
        let p = await inOut.logOut(token);
        if (p.data.flag) {
          //退出成功删除本地的登陆信息
          localStorage.removeItem("jinfeng-mms-username");
          localStorage.removeItem("jinfeng-mms-token");
          //返回登录页
          this.$router.push("/login");
        }
      } catch (err) {
        console.log(err);
      }
    },
    //对话框输入内容认证通过
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.modifyPas();
        } else {
          return false;
        }
      });
    },
    //原密码验证请求
    async modifyPas() {
      try {
        let p = await passwordApi.search(this.token, this.ruleForm.usedPass);
        if (p.data.flag) {
          this.ChangePas();//验证成功后发送修改密码请求
        }
      } catch (err) {
        console.log(err);
      }
    },
    //修改密码，验证成功发送请求
    async ChangePas() {
      try{
        let p = await passwordApi.putpas(this.pass)
        if (p.data.flag) {
          this.$message({
            message: p.data.message,
            type: "success"
          });
          this.dialogFormVisible = false //关闭对话框
        }else{
          this.$message.error("修改失败");
        }
      }catch(err){console.log(err);}
    },
    //重置按钮
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  components: {}
};
</script>

<style scoped lang="scss">
// logo
.el-header {
  background-color: #f56c6c;
  color: #fff;
  text-align: left;
  line-height: 60px;
  padding: 0 10px 0 20px;
  .logo {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    margin-right: 20px;
  }
  .company {
    font-size: 20px;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
  }
}
// 个人中心
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
.el-dropdown {
  float: right;
}
</style>
